$().ready(function () {
    /*
    * 1.初始化时设置line图标颜色
    *   1.1 获取line
    *   1.2 当前line是哪一个
    *   1.3 给当前line按钮设置颜色
    *
    * 2. 往下翻页
    *   2.1 定义一个样式数组
    *   2.2 操作数组的排列顺序
    *   2.3 重新给元素 设置样式：用遍历，把新的样式顺序赋值到list上
    *   2.4 重新设置linebtn的样式
    *   2.5 linebtn的计算逻辑
    * 3. 点击按钮翻页（点击显示对应图片）计算，翻页的次数 5 1 翻了1-5次
    *   3.1 获取当前按钮的索引值
    *   3.2 获取点击按钮的索引
    *   3.3 计算翻页次数：负数 往上翻，正数 往下翻
    *   3.4 计算当前的样式数组的排列顺序
    *   3.5 重新设置图片样式
    *   3.6 更新当前按钮的索引值，并设置按钮颜色
    * 4.设置自动轮播效果
    * 5. 鼠标放上清除轮播，移开回复轮播
    *
    * */

    var lineBtn = $('.line a'),
        index = 0,
        imgArry = ['list1', 'list2', 'list3', 'list4', 'list5', 'list6'],
        timer;

    function setBtn() {
        $(lineBtn).eq(index).css('background-color', '#45c17c')
            .siblings().css('background-color', '#ccc');
    }

    function nextPic() {
        imgArry.unshift(imgArry[5]);  //将最后一个元素放到第一个
        imgArry.pop();  //删除最后一个元素
        $('li').each(function (item, element) {
            $(element).removeClass().addClass(imgArry[item]);//删除原有类名，按新的顺序设置新的类名
        });
        index++;
        if (index > 5) {
            index = 0;
        }
        setBtn();
    }

    function prePic() {
        imgArry.push(imgArry[0]);  //将第一个元素放到最后一个
        imgArry.shift();  //删除第一个元素
        $('li').each(function (item, element) {
            $(element).removeClass().addClass(imgArry[item]);//删除原有类名，按新的顺序设置新的类名
        });
        index--;
        if (index < 5) {
            index = 0;
        }
        setBtn();
    }

    //点击btn时
    $(lineBtn).each(function () {
        $(this).click(function () {
            var nowIndex = $(this).index();  //获取被点击的索引值
            var offset = nowIndex - index;  //翻页次数

            if (offset === 0) {
                return;   //点击当前位置不翻
            } else if (offset > 0) {
                for (var i = 0; i < offset; i++) {
                    imgArry.unshift(imgArry[5]);  //将最后一个元素放到第一个
                    imgArry.pop();  //删除最后一个元素
                }
                $('li').each(function (item, element) {
                    $(element).removeClass().addClass(imgArry[item]);//删除原有类名，按新的顺序设置新的类名
                });
                index = nowIndex;
                setBtn();
            } else if (offset < 0) {
                for (var i = 0; i > offset; i--) {
                    imgArry.push(imgArry[0]);  //将第一个元素放到最后一个
                    imgArry.shift();  //删除第一个元素
                }
                $('li').each(function (item, element) {
                    $(element).removeClass().addClass(imgArry[item]);//删除原有类名，按新的顺序设置新的类名
                });
                index = nowIndex;
                setBtn();
            }
        });
    });

    //点击中间图两边图片时
    $(document).on('click', '.list3', function () {
        nextPic();
    });
    $(document).on('click', '.list1', function () {
        prePic();
    });


    setBtn();

    //自动
    timer = setInterval(nextPic, 3000);
    $('.carousel').mouseover(function () {
        clearInterval(timer)
    });
    $('.carousel').mouseleave(function () {
        timer = setInterval(nextPic, 3000);
    });


});
